<template>
    <el-dialog :title="form.id ==0?'新增':'修改'" :visible.sync="showFlag.status">
        <el-form ref="adminRef" :model="form" label-width="60px" :rules="rules">
             <el-form-item label="角色">
            <el-select v-model="form.roleid" placeholder="请选择活动区域" prop="roleid">
                <el-option label="请选择" :value="0"></el-option>
                <el-option v-for="role in roleList" :key="role.id" :label="role.rolename" :value="role.id"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="账号" prop="username">
            <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="form.status">
                    <el-radio :label="1">正常</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>                
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button >取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import {mapState,mapActions} from 'vuex'
import vm from '../../vm/vm';

export default {
    props:["showFlag"],
    computed:{
        ...mapState({roleList:state=>state.role.roleList})
    },
    methods:{
        ...mapActions('role',['roleListAciton']),
        reset(){
            //清空表单
            this.form = {
                id: 0,
                roleid: 0,
                username: '',
                password: '',
                status: 1,
            };
            //关闭模态框
            this.showFlag.status = false;
            //刷新列表
            this.$emit("updateAdmin")
        },
        submit(){
            this.$refs["adminRef"].validate((valid)=>{
                    if(valid){
                        const url =this.form.id==0?"/useradd":"/useredit"
                        this.$http.post(url,this.form).then(
                            res=>{
                                if(res.data.code=200){
                                    this.reset()
                                }
                            }
                        )
                    }
                }
            )
        },
    },
    created(){
        this.roleListAciton();
        vm.$on("editAdmin",(result)=>{
            console.log(result,"hello");
          this.showFlag.status = true
          this.form = result
          
        })
    },
    data(){
        return{
            form: {
                id: 0,
                roleid: 0,
                username: '',
                password: '',
                status: 1,
            },
            rules: {
                roleid:{required: true, message: "角色不可以为空",trigger: 'blur'},
                username:{required: true, message: "用户名不可以为空",trigger: 'blur'},
                password:{required: true, message: "密码不可以为空",trigger: 'blur'}                
            }
        }
    }
}
</script>

<style>

</style>